<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>base</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body style="margin:100px">
    <div id="app">
        <p> {{message}} </p>
        <el-button type="primary" v-on:click="reverseMessage">逆转消息</el-button>
        <p v-bind:title="title">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p>
        <p v-if="seen">you saw me</p>
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>

        <ol>
            <li v-for="todo in todos">{{todo.text}}</li>
        </ol>
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

    <script>
        Vue.component('todo-item', {
            props: ['todo'],
            template: `<li>{{todo.text}}</li>`
        })

        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
                title: new Date().toLocaleString(),
                visible: false,
                seen: true,
                todos: [{
                        text: 'learn java8'
                    },
                    {
                        text: 'learn vue2.x'
                    }
                ],
                groceryList: [{
                        id: 0,
                        text: '蔬菜'
                    },
                    {
                        id: 1,
                        text: '奶酪'
                    },
                    {
                        id: 2,
                        text: '随便其它什么人吃的东西'
                    }
                ],
            },

            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>